<template>
  <div class="singlePage">
    <leftMenu :menuList="menuList"></leftMenu>
    <div class="content">
      <leftTree @getSelectNode="getSelectNode"
                ref="leftTree"
                :hasBtn="false"
                @goAdd="goAdd"></leftTree>
      <myTable class="myTable"
               :node="node"
               ref='myTable'></myTable>
    </div>
    <el-dialog :title="undefined===form.id?'新增':'编辑'"
               :visible.sync="dialogVisible"
               :destroy-on-close="true"
               :close-on-click-modal="false"
               @close="close"
               width="500px">
      <el-form ref="form"
               :rules="rules"
               :model="form"
               label-width="120px"
               label-suffix="：">
        <el-form-item label="上级栏目"
                      prop="parentCol">
          <el-input v-model="form.parentCol"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="栏目名称"
                      prop="colName">
          <el-input v-model="form.colName"
                    :disabled="form.isEditable=='0'"></el-input>
        </el-form-item>
        <el-form-item label="一级审核员"
                      prop="firstReviewer">
          <el-select v-model="firstReviewer"
                     multiple
                     placeholder="请选择"
                     clearable>
            <el-option v-for="item in options"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级审核员"
                      prop="secondReviewer">
          <el-select v-model="secondReviewer"
                     multiple
                     placeholder="请选择"
                     clearable>
            <el-option v-for="item in options"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="导航显示"
                      v-if="form.parentId==0">
          <el-switch active-color="#1891FF"
                     inactive-color="#D2D2D2"
                     active-value="1"
                     inactive-value="0"
                     :disabled="form.isNavigationChangeable == '0'"
                     v-model="form.isNavigation">
          </el-switch>
        </el-form-item>
        <el-form-item label="排序">
          <el-input type="number"
                    :disabled="form.isEditable=='0'"
                    v-model="form.sort"></el-input>
        </el-form-item>
        <el-form-item label="url"
                      v-if="urlShow">
          <el-input v-model="form.url"
                    :disabled="form.isEditable=='0'"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary"
                   @click="addColumnInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import leftMenu from '@/components/leftMenu'
import leftTree from '@/components/module/leftTree'
import myTable from './table.vue'

export default {
  name: 'columnManage',
  components: {
    leftMenu,
    leftTree,
    myTable,
  },
  data() {
    return {
      menuList: [
        {
          title: '栏目管理',
          name: 'columnManage',
        },
        {
          title: '内容管理',
          name: 'contentManage',
        },
      ],
      options: [],
      rules: {
        colName: [
          { required: true, message: '请输入栏目名称', trigger: 'blur' },
        ],
        firstReviewer: [
          { required: true, message: '请选择一级审核员', trigger: 'blur' },
        ],
        secondReviewer: [
          { required: true, message: '请选择二级审核员', trigger: 'blur' },
        ],
      },
      dialogVisible: false,
      form: {
        colName: '',
        parentCol: '',
        parentId: '',
        isNavigation: '0',
        sort: 0,
        url: '',
        firstReviewer: '',
        secondReviewer: '0',
      },
      firstReviewer: [],
      secondReviewer: [],
      urlShow: true,
      node: {}, //传给table
    }
  },
  methods: {
    getSelectNode(node) {
      this.node = node
    },
    goAdd(e) {
      this.form = {
        colName: '',
        parentCol: '',
        parentId: '',
        isNavigation: '0',
        firstReviewer: '',
        secondReviewer: '',
        sort: 0,
        url: '',
      }
      let treeData = this.$refs.leftTree.$refs.commonleftTree.treeData
      let result = []
      this.findParent(treeData, this.node, result)
      if (result.indexOf('资讯中心') != -1) {
        this.urlShow = false
      } else {
        this.urlShow = true
      }
      this.dialogVisible = true
      this.form.parentCol = e.colName
      this.form.parentId = e.id
      console.log(this.form.parentId, 888)
    },
    findParent(data, target, result) {
      for (let item of data) {
        if (item.id === target.id) {
          //将查找到的目标数据加入结果数组中
          //可根据需求unshift(item.id)或unshift(item)
          result.unshift(item.colName)
          return true
        }
        if (item.subLanMu && item.subLanMu.length > 0) {
          //根据查找到的结果往上找父级节点
          let isFind = this.findParent(item.subLanMu, target, result)
          if (isFind) {
            result.unshift(item.colName)
            return true
          }
        }
      }
      //走到这说明没找到目标
      return false
    },
    async addColumnInfo() {
      this.form.firstReviewer = this.firstReviewer.join(',')
      this.form.secondReviewer = this.secondReviewer.join(',')
      console.log(this.form, 99999)
      if (this.form.id && this.form.isEditable == '0') {
        let res = await this.$api.updateColumnReviewer(this.form)
        if (res.code == 200) {
          this.dialogVisible = false
          this.$message.success('编辑成功')
          this.$refs.leftTree.$refs.commonleftTree.getleftTree()
          this.$refs.myTable.getColumnInfoList()
        }
        return
      }

      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let res
          if (this.form.id) {
            res = await this.$api.updateColumnInfo(this.form)
          } else {
            res = await this.$api.addColumnInfo(this.form)
          }
          if (res.code == 200) {
            this.dialogVisible = false
            this.$message.success((res.data && res.data.message) || res.message)
            this.$refs.leftTree.$refs.commonleftTree.getleftTree()
            this.$refs.myTable.getColumnInfoList()
          }
        }
      })
    },
    getUserForReviewer() {
      this.$api.getUserForReviewer().then((res) => {
        this.options = res.data
      })
    },
    close() {
      this.firstReviewer = []
      this.secondReviewer = []
    },
  },
  mounted() {
    this.getUserForReviewer()
  },
}
</script>

<style scoped lang="less">
.singlePage {
  display: flex;
  .content {
    margin: 20px 15px;
    display: flex;
    flex: 1;
    overflow: hidden;
    overflow-x: auto;
    .myTable {
      flex: 1;
      height: 100%;
      background-color: #fff;
      padding: 10px;
      border: 1px solid #eee;
      //border-left: none;
    }
  }
}
.el-select {
  width: 100%;
}
/deep/.el-dialog__body {
  padding-bottom: 0;
}
</style>
